<!-- 首页 -->
<template>
	<view class="content">
		<!-- 登录及实名认证 -->
		<view class="topBar">

			<button type="default" class="login" @click="getUserProfile">
				<view class="noLogin" v-if="!isLogin">
					<image src="https://tuanwei.yjha.com.cn/resource/home_user.png" mode="heightFix"></image>
					<text>点击登录</text>
				</view>
				<view class="yesLogin" v-else>
					<image :src="userImg" mode="heightFix"></image>
					<text>{{ userName }}</text>
				</view>
			</button>
			<view class="realName">
				<text v-if="!isRealName" @click="realBtn">进行实名认证</text>
				<text v-else @click="realTrue">已实名</text>
			</view>
		</view>
		<!-- 团徽图片 -->
		<view class="imgGroup">
			<image src="https://tuanwei.yjha.com.cn/resource/home_bg_1.png" mode="widthFix"></image>
		</view>
		<!-- 主体 -->

		<view class="startBtn">
			<!-- 开始游戏 -->
			<button type="default" class="startBtn" @click="startGame">
				<image src="https://tuanwei.yjha.com.cn/resource/startBtn_bg.png" mode="widthFix"></image>
			</button>
		</view>
		<!-- 菜单栏 -->
		<view class="menuBar">
			<!-- 证书下载 -->
			<view class="class-item" @click="zsBtn">
				<image src="https://tuanwei.yjha.com.cn/resource/home_zsxz.png" mode="aspectFit"></image>
			</view>
			<!-- 奖品 -->
			<view class="class-item" @click="jpBtn">
				<image src="https://tuanwei.yjha.com.cn/resource/home_jp.png" mode="aspectFit"></image>
			</view>
			<!-- 排行榜 -->
			<view class="class-item" @click="rankBtn">
				<image src="https://tuanwei.yjha.com.cn/resource/home_phb.png" mode="aspectFit"></image>
			</view>
			<!-- 活动入口 -->
			<view class="class-item" @click="dyBtn">
				<image src="https://tuanwei.yjha.com.cn/resource/home_dy.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImg: '', //头像
				userName: '', //昵称
				userCode: '', //code
				isLogin: false, //是否登录
				isRealName: false, //是否实名认证
				wxKey: '', //oJrmA5T-sYMYeqQHUgpgMiVAxO_o
				token: '',
				hasUserInfo: false
			}
		},
		onLoad() {
			// 获取缓存信息
			const getUserName = uni.getStorageSync('userName');
			const getUserImg = uni.getStorageSync('userImg');
			console.log(getUserImg + getUserName)
			if (getUserName != "") {
				this.userName = getUserName;
				this.userImg = getUserImg;
				this.token = uni.getStorageSync('token');
				this.wxKey = uni.getStorageSync('wxKey')
				this.isLogin = true;
				console.log(this.baseUrl)
				console.log(this.token)
				// 获取是否实名
				this.getRealName()
			}
		},
		// 自定义分享
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		//用户点击右上角分享朋友圈
		onShareTimeline: function() {
			return {
				title: '“陇原青年点亮红色甘肃”在线答题挑战赛',
				// query: {
				// 	key: value
				// },
				// imageUrl: ''
			}
		},
		methods: {
			// 登录-获取用户----存储、展示
			getUserProfile(e) {
				var that = this;
				if (that.isLogin == false) {
					wx.getUserProfile({
						desc: '用于用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success(res) {
							console.log(res)
							that.userImg = res.userInfo.avatarUrl;
							that.userName = res.userInfo.nickName;
							// 进行本地存储
							uni.setStorageSync('userName', that.userName)
							uni.setStorageSync('userImg', that.userImg)
							that.getRealName();
							// 获取用户wxKey及token
							// 获取用户wxKEY
							wx.login({
								success(e) {
									console.log(e)
									wx.request({
										url: that.baseUrl + '/api/login?code=' + e.code,
										header: {
											Authorization: uni.getStorageSync('token')
										},
										method: 'GET', //请求方式
										success(res) {
											that.isLogin = true;
											const wxObj = res.data.data;
											that.token = wxObj.token;
											that.wxKey = wxObj.wx.openid;
											uni.setStorageSync('wxKey', wxObj.wx.openid);
											uni.setStorageSync('token', wxObj.token);
											// 判断是否实名认证
											that.getRealName()
										},
										//失败返回
										fail(err) {
											console.log(err)
										},
									})
								},
								fail(err) {
									that.showToast('接口请求失败，请稍后重试', 'error')
								}
							})
						},
						fail(err) {
							that.showToast('登录需要您的授权，请授权后进行操作', 'error')
						}
					})
				}


			},
			getRealName() {
				let that = this;
				//根据wxKey判断是否实名
				uni.request({
					url: that.baseUrl + '/api/user/getByWxKey', //根据wxKey判断是否实名
					method: 'GET',
					data: {
						wxKey: that.wxKey,
					},
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res);
						if (res.data.data.user != null) {
							that.isRealName = true;
						}
					}
				});
			},
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			},
			// 点击进行实名认证
			realBtn() {
				const that = this;
				if (this.isLogin == true && this.wxKey != "") {
					uni.redirectTo({
						url: '../form/realName/realName?wxKey=' + that.wxKey + "&token=" + that.token
					});
				} else {
					that.showToast('请登录后进行操作', 'error')
				}
			},
			// 开始答题
			startGame() {
				if (this.isRealName == true && this.isLogin == true) {
					uni.navigateTo({
						url: '../map/map?wxKey=' + this.wxKey + "&token=" + this.token
					});
				} else {
					this.showToast('请完成实名认证后开始答题', 'error')
				}
			},
			// 证书下载
			zsBtn() {
				const that = this;
				console.log(this.isLogin)
				if (this.isLogin == true) {
					uni.request({
						url: that.baseUrl + '/api/getCertificate',
						method: 'GET',
						data: {
							blWxkey: this.wxKey
						},
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: res => {
							console.log(res.data.data.pass)
							if (res.data.data.pass == null) {
								that.showToast('您尚未通关，请通关后查看', 'error')
							} else {
								uni.navigateTo({
									url: '../certificate/certificate?wxKey=' + this.wxKey + '&token=' +
										this.token
								});
							}
						},
					});

				} else {
					that.showToast('请登录后进行操作', 'error')
				}
			},
			// 奖品
			jpBtn() {
				uni.navigateTo({
					url: '../luckDraw/luckDraw'
				});
			},
			//排行榜
			rankBtn() {
				if (this.isLogin == true) {
					uni.navigateTo({
						url: '../ranking/ranking'
					});
				} else {
					this.showToast('请登录后进行操作', 'error')
				}
			},
			// 抖音活动入口
			dyBtn() {
				uni.navigateTo({
					url: '../dyActive/dyActive'
				});
			},
			// 已实名信息点击
			realTrue() {
				this.showToast('您已完成实名认证', 'default')
			},

		},

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: url('https://tuanwei.yjha.com.cn/resource/home_bg.jpg') no-repeat;
		background-position: top center;
		background-size: 100% 100%;
		position: relative;

		.topBar {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 60px;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			font-family: '黑体';
			padding: 0 20px;
			box-sizing: border-box;

			.login {
				width: 55%;
				height: 60px;
				background-color: transparent;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}

				.yesLogin {
					width: 100%;
					display: block;
					height: 60px;

					image {
						float: left;
						display: inline-block;
						width: 34px;
						height: 34px;
						margin: 13px 0px;
					}

					text {
						float: left;
						display: inline-block;
						width: auto;
						height: 60px;
						line-height: 60px;
						font-size: 16px;
						color: #fff;
						margin-left: 10px;
						text-align: left;
					}
				}

				.noLogin {
					width: 100%;
					display: block;
					height: 60px;

					image {
						float: left;
						display: inline-block;
						width: 34px;
						height: 34px;
						margin: 13px 0px;

					}

					text {
						float: left;
						display: inline-block;
						width: auto;
						height: 60px;
						line-height: 60px;
						font-size: 16px;
						color: #fff;
						margin-left: 10px;
						text-align: left;
					}
				}

			}

			.realName {
				width: auto;
				height: 34px;
				margin: 13px 0px;
				padding: 0 10px;
				background-color: #f4965a;
				border: 2px #faceb1 solid;
				border-radius: 4px;

				text {
					display: block;
					line-height: 30px;
					color: #fff;
					font-size: 16px;
					text-align: right;
				}
			}
		}

		.imgGroup {
			position: absolute;
			top: calc(60px + 2%);
			left: 0px;
			width: 100%;
			height: 55px;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			padding: 0 15px;
			box-sizing: border-box;

			@media screen and (max-width: 320px) {
				width: 100%;
			}

			image {
				width: 100%;

				@media screen and (max-width: 320px) {
					width: 100%;
				}
			}

			@media screen and (max-width: 320px) {
				top: 50px;
			}

			@media screen and (max-width: 375px) {
				top: 70px;
			}

			@media screen and (max-width: 414px) {
				top: 80px;
			}
		}
	}

	// 主体
	.startBtn {
		position: fixed;
		bottom: 8%;
		left: 10%;
		width: 80%;
		height: auto;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		background-color: transparent;

		image {
			width: 100%;
		}

		&::after {
			border: none;
		}
	}

	.menuBar {
		position: fixed;
		top: 24%;
		right: 10px;
		width: 50px;


		.class-item {
			width: 100%;
			height: 40px;
			margin-bottom: 30px;

			image {
				display: block;
				width: 50px;
				height: 50px;
			}

			&:last-child {
				image {
					width: 50px;
				}
			}
		}
	}
</style>
